<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust1-warp"
    style="top:5%;overflow-y: hidden"
    :width="1200"
  >
    <a-form :form="form" layout="inline">
      <a-form-item label="名称">
        <a-input placeholder="请输入名称" v-decorator="[ 'name', validatorRules.name]" :disabled="true"></a-input>
      </a-form-item>
      <a-form-item label="类型" :hidden="true">
        <a-input
          placeholder="请输入类别"
          v-decorator="[ 'category', validatorRules.category]"
          :disabled="true"
        ></a-input>
      </a-form-item>
      <a-form-item label="主键" :hidden="true">
        <a-input placeholder="请输入主键" :disabled="true" v-decorator="[ 'key', validatorRules.key]"></a-input>
      </a-form-item>
      <a-form-item label="描述">
        <a-input
          placeholder="请输入描述"
          v-decorator="[ 'description', validatorRules.description]"
          :disabled="true"
        ></a-input>
      </a-form-item>
    </a-form>
    <bpmn-panel ref="bpmnModeler" :processKey="model.key" style="height:650px;"
                @startType="startTypeMethod" @endType="endTypeMethod" @dateDiffType="dateDiffTypeMethod"/>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import BpmnPanel from '@/components/bpmn/modify'
import { editModel, getModelSource, deployModelSource } from '@/api/activiti'

export default {
  components: {
    BpmnPanel
  },
  data() {
    return {
      title: '任务人员与时间分配',
      confirmLoading: false,
      visible: false,
      form: this.$form.createForm(this),
      model: {},
      validatorRules: {
        name: {
          rules: [
            { required: true, message: '请输入名称!' },
            { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
          ]
        },
        category: {
          rules: [
            { required: true, message: '请输入类型!' },
            { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' }
          ]
        },
        key: {
          rules: [
            { required: true, message: '请输入主键!' },
            { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' }
          ]
        },
        description: {
          rules: [{ min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }]
        }
      }
    }
  },
  methods: {
    clearFields(){
      this.startType = []
      this.endType = []
      this.dateDiffType=[]
    },
    show(obj) {
      this.visible = true
      this.form.resetFields()
      obj.description = JSON.parse(obj.metaInfo).description
      this.model = Object.assign({}, obj)
      let that = this
      this.$nextTick(() => {
        that.setValues()
      })
    },

    setValues() {
      const that = this
      this.form.setFieldsValue(pick(this.model, 'name', 'category', 'key','description','startTime','endTime','dateDiff'))
      getModelSource(this.model.id).then(res => {
        if (res.success) {
          that.$refs.bpmnModeler.loadDiagram(res.result)
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    arrayHandler(arr1,arr2){
      let nodesTemp = arr1.concat(arr2);
      let nodes = [];
      let temp = {};
      nodesTemp.forEach(item=>{
        if(temp[item.activityId]){
          nodes.push({
            ...temp[item.activityId],
            ...item
          })
        }else{
          temp[item.activityId] = Object.assign({},item);
        }
      })
      return nodes;
    },
    handleOk() {
      const that = this
      // let nodes = this.arrayHandler(this.startType,this.endType);
      //     nodes = this.arrayHandler(nodes,this.dateDiffType);
 /*     nodes = this.arrayHandler(nodes,this.startType);
      nodes = this.arrayHandler(nodes,this.endType);*/

      this.$refs.bpmnModeler
        .saveDiagram()
        .then(xml => {
          // 触发表单验证
          that.confirmLoading = true
          let data = Object.assign({}, that.model, { source: xml.xml })
          deployModelSource(data).then(res => {
            if (res.success) {
              that.$emit('deployModel', res.result)
              that.close()
            } else {
              that.$message.warning(res.message)
            }
            that.confirmLoading = false
          })
        })
        .catch(e => {
          console.log(e)
        })
    },
    handleCancel() {
      this.close()
    },
    //任务节点改变时间

    startTypeMethod(properties){
      this.startType=properties
      console.log("startTypeproperties："+this.startType)
    },
    endTypeMethod(properties){
      this.endType=properties
      console.log("endTypeproperties："+this.endType)
    },
    dateDiffTypeMethod(properties){
      this.dateDiffType=properties
      console.log("dateDiffTypeproperties："+this.dateDiffType)
    }
  }
}
</script>